<template>
  <div class="diy-table">
    <el-table :data="tableData" stripe style="width: 100%" size="mini" row-key="_id" indent = '2' :tree-props="isChildren">
      <template v-for="item in tableHeader" row-key='_id'>
        <!--传入的数据中，如果有座席数据，可以用座席组件展示-->
        <el-table-column
          v-if="item.prop !== 'operaSet' && item.prop !== 'UpdateAgent'"
          :width="item.width"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
        <!--用坐席组件回显座席-->
        <el-table-column
          v-if="item.prop === 'UpdateAgent'"
          :width="item.width"
          :label="item.label">
          <template scope="scope">
            <agent
              :id="scope.row.UpdateAgent"
              :isNum="true"
            ></agent>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.prop === 'operaSet'"
          :width="item.width"
          :label="item.label">
          <template scope="scope">
            <el-button v-if="scope.row.ParentId" type="text" size="small" @click='exportAct({actMethod: "update", data: scope.row})'>修改</el-button>
            <el-button v-if="scope.row.ParentId" type="text" size="small" class="del" @click='exportAct({actMethod: "del", data: scope.row})'>删除</el-button>
            <el-button v-if='!scope.row.children && !scope.row.ParentId' type="text" @click="exportAct({actMethod: 'del', data: scope.row})" size="small" class="del">删除</el-button>
            <el-button v-if="supportLevel2 && !scope.row.ParentId" type="text" @click="exportAct({actMethod: 'addTwo', data: scope.row})" size="small" class="addTwo">添加二级满意度</el-button>
            <el-button v-if="!scope.row.ParentId" v-for="one in item.opera" type="text" @click="exportAct({actMethod: one.actMethod, data: scope.row})" size="small" :class="one.actMethod">{{one.actName}}</el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  export default {
    data () {
      return {
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      tableHeader: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      exportAct (obj) {
        this.$emit('exportAct', obj)
      }
    },
    computed: {
      supportLevel2 () {
        return this.$store.state.cti.globalLet.ass_current_new_features
      },
      isChildren () {
        return this.$store.state.cti.globalLet.ass_current_new_features ? {children: 'children'} : {children: 'noChildren'}
      }
    },
    components: {
      Agent
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .diy-table
    .el-table__expanded-cell
      .treeChildren
        border-bottom 1px solid #e7e7eb
      .treeChildren:last-nth-of-type(1)
        border-bottom 0
    .is-align-middle
      display flex
      align-items center
    .update
      cursor pointer
    .del
      color $c-pink
      cursor pointer
</style>
<style lang = 'stylus'>
  .diy-table
    .el-table__expanded-cell
      padding 0px
      padding-left 64px
</style>
